<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./utils/css/reset.css">
    <style>
        canvas{
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>
    <canvas></canvas>
    <script>
        const props={
            speed:0.1,
            height:500,
            width:500,
        }   
        const state={
            xOffset:0,
            canvas:null,
            ctx:null
        }
        function drawSin(ctx,xOffset=0){
            const points=[]
            const {width:canvasWidth,height:canvasHeight}=props
            const startX=0
            const waveWidth=0.05
            const waveHeigh=20;
            for(let x= startX;x<startX+canvasWidth;x+=20/canvasWidth){
                const y=waveHeigh * Math.sin((startX+x)*waveWidth + xOffset)
                points.push([x,canvasHeight/2+y])
                ctx.lineTo(x,canvasHeight/2+y)
            }
            ctx.lineTo(canvasWidth,canvasHeight)
            ctx.lineTo(startX,canvasHeight)            
            ctx.lineTo(points[0][0],points[0][1])
            ctx.stroke()
        }
        function draw(){
            const {canvas,ctx}=state;
            const {width:canvasWidth,height:canvasHeight}=props
            drawSin(ctx,state.xOffset)
            state.xOffset+=props.speed
            requestAnimationFrame(draw);
        }
        window.onload=function(){
            const {width,height}=props
            const self=this;
            const canvas=document.querySelector('canvas')
            canvas.width=width 
            canvas.height=height
            state.canvas=canvas
            const ctx=canvas.getContext('2d')
            state.ctx=ctx
            draw()
        }
    </script>
</body>
</html>